<template>
    <div class="notes-container">
      <div class="page-header">
        <h1>笔记本</h1>
        <p>智能笔记整理与分享，提高学习效率</p>
      </div>
      
      <div class="notes-content">
        <div class="notes-sidebar">
          <div class="sidebar-header">
            <h3>笔记分类</h3>
            <el-button type="primary" size="small" @click="showCreateFolderDialog">
              <el-icon><FolderAdd /></el-icon> 新建文件夹
            </el-button>
          </div>
          
          <el-menu
            :default-active="currentFolder"
            class="folder-menu"
            @select="handleFolderSelect"
          >
            <el-menu-item index="all">
              <el-icon><Files /></el-icon>
              <span>全部笔记</span>
            </el-menu-item>
            <el-menu-item index="recent">
              <el-icon><Timer /></el-icon>
              <span>最近编辑</span>
            </el-menu-item>
            <el-menu-item index="favorites">
              <el-icon><Star /></el-icon>
              <span>收藏笔记</span>
            </el-menu-item>
            <el-menu-item index="shared">
              <el-icon><Share /></el-icon>
              <span>已分享</span>
            </el-menu-item>
            <el-sub-menu index="folders">
              <template #title>
                <el-icon><Folder /></el-icon>
                <span>我的文件夹</span>
              </template>
              <el-menu-item 
                v-for="folder in folders" 
                :key="folder.id" 
                :index="'folder-' + folder.id"
              >
                <span>{{ folder.name }}</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
          
          <div class="create-note">
            <el-button type="success" @click="createNewNote">
              <el-icon><DocumentAdd /></el-icon> 新建笔记
            </el-button>
          </div>
        </div>
        
        <div class="notes-main">
          <div class="notes-filters">
            <div class="search-box">
              <el-input
                v-model="searchKeyword"
                placeholder="搜索笔记..."
                prefix-icon="Search"
                clearable
                @input="handleSearch"
              ></el-input>
            </div>
            
            <div class="view-options">
              <div class="view-buttons">
                <el-radio-group v-model="viewMode" size="small">
                  <el-radio-button label="grid">
                    <el-icon><Grid /></el-icon>
                  </el-radio-button>
                  <el-radio-button label="list">
                    <el-icon><List /></el-icon>
                  </el-radio-button>
                </el-radio-group>
              </div>
              
              <el-select v-model="sortOption" placeholder="排序" size="small">
                <el-option label="最近更新" value="recent"></el-option>
                <el-option label="标题升序" value="title_asc"></el-option>
                <el-option label="标题降序" value="title_desc"></el-option>
                <el-option label="创建时间" value="created"></el-option>
              </el-select>
            </div>
          </div>
          
          <div class="notes-list" :class="viewMode === 'grid' ? 'grid-view' : 'list-view'">
            <template v-if="filteredNotes.length > 0">
              <div 
                v-for="(note, index) in filteredNotes" 
                :key="index"
                class="note-item"
              >
                <div class="note-content" @click="openNote(note)">
                  <div class="note-info">
                    <div class="note-title">
                      <span class="title-icon">
                        <el-icon v-if="note.type === 'text'"><Document /></el-icon>
                        <el-icon v-else-if="note.type === 'markdown'"><Notebook /></el-icon>
                        <el-icon v-else-if="note.type === 'mind_map'"><Connection /></el-icon>
                        <el-icon v-else><Document /></el-icon>
                      </span>
                      {{ note.title }}
                    </div>
                    <div class="note-preview">{{ note.preview }}</div>
                    <div class="note-meta">
                      <span class="note-date">{{ note.lastModified }}</span>
                      <span class="note-folder" v-if="note.folder">{{ getFolderName(note.folder) }}</span>
                    </div>
                  </div>
                </div>
                
                <div class="note-actions-container">
                  <div class="note-actions">
                    <!-- 常用操作按钮直接显示 -->
                    <el-button type="text" size="small" @click.stop="editNote(note)" title="编辑">
                      <el-icon><Edit /></el-icon>
                    </el-button>
                    <el-button type="text" size="small" @click.stop="shareNote(note)" title="分享">
                      <el-icon><Share /></el-icon>
                    </el-button>
                    <el-button type="text" size="small" @click.stop="toggleFavorite(note)" title="收藏">
                      <el-icon :class="{ 'favorite-active': note.favorite }"><Star /></el-icon>
                    </el-button>
                    
                    <!-- 其他操作放在下拉菜单中 -->
                    <el-dropdown trigger="click">
                      <el-button type="text" size="small">
                        <el-icon><MoreFilled /></el-icon>
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click.stop="moveNote(note)">
                            <el-icon><FolderOpened /></el-icon> 移动到
                          </el-dropdown-item>
                          <el-dropdown-item @click.stop="exportNote(note)">
                            <el-icon><Download /></el-icon> 导出
                          </el-dropdown-item>
                          <el-dropdown-item divided @click.stop="confirmDeleteNote(note)">
                            <el-icon><Delete /></el-icon> 删除
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
              </div>
            </template>
            
            <div class="empty-notes" v-else>
              <el-empty description="暂无笔记"></el-empty>
            </div>
          </div>
          
          <div class="pagination-container" v-if="filteredNotes.length > 0">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="totalNotes"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="handlePageChange"
            ></el-pagination>
          </div>
        </div>
      </div>
      
      <!-- 新建文件夹对话框 -->
      <el-dialog
        v-model="folderDialogVisible"
        title="新建文件夹"
        width="400px"
      >
        <el-form :model="folderForm" ref="folderFormRef" :rules="folderRules">
          <el-form-item prop="name" label="文件夹名称">
            <el-input v-model="folderForm.name" placeholder="请输入文件夹名称"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="folderDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="createFolder">创建</el-button>
          </span>
        </template>
      </el-dialog>
      
      <!-- 新建/编辑笔记对话框 -->
      <el-dialog
        v-model="noteDialogVisible"
        :title="isEditingNote ? '编辑笔记' : '新建笔记'"
        width="800px"
      >
        <el-form :model="noteForm" ref="noteFormRef" :rules="noteRules" label-width="80px">
          <el-form-item prop="title" label="标题">
            <el-input v-model="noteForm.title" placeholder="请输入笔记标题"></el-input>
          </el-form-item>
          
          <el-form-item prop="type" label="类型">
            <el-select v-model="noteForm.type" placeholder="请选择笔记类型">
              <el-option label="文本" value="text"></el-option>
              <el-option label="Markdown" value="markdown"></el-option>
              <el-option label="思维导图" value="mind_map"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item prop="folder" label="文件夹">
            <el-select v-model="noteForm.folder" placeholder="请选择文件夹">
              <el-option label="未分类" value=""></el-option>
              <el-option 
                v-for="folder in folders" 
                :key="folder.id" 
                :label="folder.name" 
                :value="folder.id"
              ></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item prop="content" label="内容">
            <el-input 
              v-if="noteForm.type === 'text'"
              v-model="noteForm.content" 
              type="textarea" 
              :rows="10"
              placeholder="请输入笔记内容"
            ></el-input>
            <div v-else-if="noteForm.type === 'markdown'" class="markdown-editor">
              <!-- 这里可以集成Markdown编辑器组件 -->
              <el-input 
                v-model="noteForm.content" 
                type="textarea" 
                :rows="10"
                placeholder="请输入Markdown内容"
              ></el-input>
            </div>
            <div v-else-if="noteForm.type === 'mind_map'" class="mind-map-editor">
              <!-- 这里可以集成思维导图编辑器组件 -->
              <div class="editor-placeholder">思维导图编辑器</div>
            </div>
          </el-form-item>
          
          <el-form-item prop="tags" label="标签">
            <el-select
              v-model="noteForm.tags"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请输入标签（可多选）"
            >
              <el-option
                v-for="tag in commonTags"
                :key="tag"
                :label="tag"
                :value="tag"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="noteDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveNote">保存</el-button>
          </span>
        </template>
      </el-dialog>
      
      <!-- 移动笔记对话框 -->
      <el-dialog
        v-model="moveDialogVisible"
        title="移动笔记"
        width="400px"
      >
        <el-form>
          <el-form-item label="选择文件夹">
            <el-select v-model="moveTargetFolder" placeholder="请选择目标文件夹">
              <el-option label="未分类" value=""></el-option>
              <el-option 
                v-for="folder in folders" 
                :key="folder.id" 
                :label="folder.name" 
                :value="folder.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="moveDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmMoveNote">移动</el-button>
          </span>
        </template>
      </el-dialog>
      
      <!-- 分享笔记对话框 -->
      <el-dialog
        v-model="shareDialogVisible"
        title="分享笔记"
        width="500px"
      >
        <div class="share-options">
          <h4>分享方式</h4>
          <el-radio-group v-model="shareOption">
            <el-radio label="link">生成链接</el-radio>
            <el-radio label="qrcode">二维码</el-radio>
            <el-radio label="email">邮件</el-radio>
          </el-radio-group>
          
          <div class="share-content" v-if="shareOption === 'link'">
            <el-input v-model="shareLink" readonly>
              <template #append>
                <el-button @click="copyShareLink">复制</el-button>
              </template>
            </el-input>
            <div class="share-permissions">
              <el-checkbox v-model="sharePermissions.allowEdit">允许编辑</el-checkbox>
              <el-checkbox v-model="sharePermissions.allowDownload">允许下载</el-checkbox>
            </div>
          </div>
          
          <div class="share-content" v-else-if="shareOption === 'qrcode'">
            <div class="qrcode-placeholder">
              <el-icon><PictureFilled /></el-icon>
              <span>二维码</span>
            </div>
            <el-button type="primary" size="small">下载二维码</el-button>
          </div>
          
          <div class="share-content" v-else-if="shareOption === 'email'">
            <el-form>
              <el-form-item label="收件人邮箱">
                <el-input v-model="shareEmail" placeholder="请输入收件人邮箱"></el-input>
              </el-form-item>
              <el-form-item label="邮件内容">
                <el-input 
                  v-model="shareEmailContent" 
                  type="textarea" 
                  :rows="3"
                  placeholder="请输入邮件内容"
                ></el-input>
              </el-form-item>
            </el-form>
            <el-button type="primary">发送邮件</el-button>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="shareDialogVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
      
      <!-- 查看笔记对话框 -->
      <el-dialog
        v-model="viewDialogVisible"
        title="查看笔记"
        width="800px"
        class="note-view-dialog"
      >
        <div v-if="viewingNote" class="view-note-content">
          <div class="view-note-header">
            <div class="title-row">
              <span class="note-type-icon">
                <el-icon v-if="viewingNote.type === 'text'"><Document /></el-icon>
                <el-icon v-else-if="viewingNote.type === 'markdown'"><Notebook /></el-icon>
                <el-icon v-else-if="viewingNote.type === 'mind_map'"><Connection /></el-icon>
                <el-icon v-else><Document /></el-icon>
              </span>
              <h2>{{ viewingNote.title }}</h2>
            </div>
            
            <div class="view-note-meta">
              <span class="note-type">
                <el-tag size="small" effect="light">
                  {{ viewingNote.type === 'text' ? '文本' : 
                     viewingNote.type === 'markdown' ? 'Markdown' : 
                     viewingNote.type === 'mind_map' ? '思维导图' : '文本' }}
                </el-tag>
              </span>
              <span class="note-folder" v-if="viewingNote.folder">
                <el-tag size="small" type="info" effect="light">{{ getFolderName(viewingNote.folder) }}</el-tag>
              </span>
              <span class="note-date">最后编辑：{{ viewingNote.lastModified }}</span>
            </div>
            
            <div class="view-note-tags" v-if="viewingNote.tags && viewingNote.tags.length > 0">
              <el-tag 
                v-for="tag in viewingNote.tags" 
                :key="tag" 
                size="small" 
                effect="plain"
                class="tag-item"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
          
          <div class="view-note-body">
            <div v-if="viewingNote.type === 'text'" class="text-content">
              <pre>{{ viewingNote.content }}</pre>
            </div>
            <div v-else-if="viewingNote.type === 'markdown'" class="markdown-content">
              <!-- 这里可以集成Markdown渲染组件 -->
              <pre>{{ viewingNote.content }}</pre>
            </div>
            <div v-else-if="viewingNote.type === 'mind_map'" class="mind-map-content">
              <!-- 这里可以集成思维导图渲染组件 -->
              <div class="mind-map-placeholder">思维导图内容</div>
            </div>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="viewDialogVisible = false">关闭</el-button>
            <el-button type="primary" @click="editNote(viewingNote)">编辑</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue';
  import { 
    Search, 
    Document, 
    Notebook, 
    Files, 
    Folder, 
    FolderAdd, 
    FolderOpened, 
    DocumentAdd, 
    Edit, 
    Delete, 
    Share, 
    Download, 
    Star, 
    Timer, 
    Grid, 
    List, 
    Connection, 
    MoreFilled,
    PictureFilled
  } from '@element-plus/icons-vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  
  // 常用标签
  const commonTags = [
    '学习笔记', '重点内容', '考试复习', '课堂笔记', '读书笔记', 
    '知识点', '问题解答', '思维导图', '项目计划', '个人总结'
  ];
  
  // 状态变量
  const currentFolder = ref('all'); // 默认选中全部笔记
  const searchKeyword = ref('');
  const viewMode = ref('grid'); // 默认网格视图
  const sortOption = ref('recent');
  const currentPage = ref(1);
  const pageSize = ref(12);
  const folderDialogVisible = ref(false);
  const noteDialogVisible = ref(false);
  const moveDialogVisible = ref(false);
  const shareDialogVisible = ref(false);
  const isEditingNote = ref(false);
  const editingNoteId = ref(null);
  const moveTargetFolder = ref('');
  const moveNoteId = ref(null);
  const shareOption = ref('link');
  const shareLink = ref('https://aistudy.com/share/note/123456');
  const shareEmail = ref('');
  const shareEmailContent = ref('');
  const sharePermissions = ref({
    allowEdit: false,
    allowDownload: true
  });
  
  // 表单数据
  const folderFormRef = ref(null);
  const noteFormRef = ref(null);
  const folderForm = ref({
    name: ''
  });
  const noteForm = ref({
    title: '',
    type: 'text',
    content: '',
    folder: '',
    tags: []
  });
  
  // 表单验证规则
  const folderRules = {
    name: [
      { required: true, message: '请输入文件夹名称', trigger: 'blur' },
      { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
    ]
  };
  const noteRules = {
    title: [
      { required: true, message: '请输入笔记标题', trigger: 'blur' },
      { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
    ],
    type: [
      { required: true, message: '请选择笔记类型', trigger: 'change' }
    ],
    content: [
      { required: true, message: '请输入笔记内容', trigger: 'blur' }
    ]
  };
  
  // 模拟文件夹数据
  const folders = ref([
    { id: '1', name: '学习笔记' },
    { id: '2', name: '工作计划' },
    { id: '3', name: '读书笔记' },
    { id: '4', name: '项目资料' }
  ]);
  
  // 模拟笔记数据
  const notes = ref([
    {
      id: '1',
      title: '高数知识点总结',
      type: 'markdown',
      content: '# 高等数学重点知识\n\n## 微积分基础\n\n1. 导数定义\n2. 积分概念\n\n## 常见公式\n\n...',
      preview: '高等数学重点知识，包括微积分基础、导数定义、积分概念等内容...',
      folder: '1',
      tags: ['学习笔记', '高等数学', '重点内容'],
      createTime: '2023-04-10',
      lastModified: '2023-05-15',
      favorite: true,
      shared: false
    },
    {
      id: '2',
      title: '物理实验报告',
      type: 'text',
      content: '实验目的：测量重力加速度\n实验器材：单摆装置、秒表、刻度尺\n实验步骤：\n1. 测量摆长\n2. 测量周期\n3. 计算重力加速度\n...',
      preview: '实验目的：测量重力加速度，实验器材：单摆装置、秒表、刻度尺...',
      folder: '1',
      tags: ['实验报告', '物理', '课堂笔记'],
      createTime: '2023-04-20',
      lastModified: '2023-04-20',
      favorite: false,
      shared: true
    },
    {
      id: '3',
      title: '英语词汇思维导图',
      type: 'mind_map',
      content: '{"root":{"data":{"text":"英语词汇"},"children":[{"data":{"text":"名词"}},{"data":{"text":"动词"}},{"data":{"text":"形容词"}}]}}',
      preview: '英语词汇思维导图，包括名词、动词、形容词等分类...',
      folder: '1',
      tags: ['英语', '思维导图', '词汇'],
      createTime: '2023-05-05',
      lastModified: '2023-06-10',
      favorite: true,
      shared: false
    },
    {
      id: '4',
      title: '项目开发计划',
      type: 'text',
      content: '项目名称：学习平台开发\n开发周期：3个月\n主要功能：\n1. 用户管理\n2. 课程系统\n3. 学习追踪\n...',
      preview: '项目名称：学习平台开发，开发周期：3个月，主要功能：用户管理、课程系统...',
      folder: '4',
      tags: ['项目计划', '开发'],
      createTime: '2023-06-01',
      lastModified: '2023-06-15',
      favorite: false,
      shared: true
    },
    {
      id: '5',
      title: '读书笔记：《思考，快与慢》',
      type: 'markdown',
      content: '# 《思考，快与慢》读书笔记\n\n## 第一章：两个系统\n\n系统1：快速、自动、无意识\n系统2：缓慢、需要努力、有意识\n\n...',
      preview: '《思考，快与慢》读书笔记，第一章：两个系统，系统1：快速、自动、无意识...',
      folder: '3',
      tags: ['读书笔记', '心理学'],
      createTime: '2023-03-15',
      lastModified: '2023-03-20',
      favorite: true,
      shared: false
    }
  ]);
  
  // 计算属性：总笔记数
  const totalNotes = computed(() => {
    return filteredNotes.value.length;
  });
  
  // 计算属性：筛选后的笔记
  const filteredNotes = computed(() => {
    let result = notes.value;
    
    // 按文件夹筛选
    if (currentFolder.value === 'recent') {
      // 最近编辑的笔记，按修改时间排序
      result = [...result].sort((a, b) => new Date(b.lastModified) - new Date(a.lastModified));
    } else if (currentFolder.value === 'favorites') {
      // 收藏的笔记
      result = result.filter(note => note.favorite);
    } else if (currentFolder.value === 'shared') {
      // 已分享的笔记
      result = result.filter(note => note.shared);
    } else if (currentFolder.value.startsWith('folder-')) {
      // 特定文件夹的笔记
      const folderId = currentFolder.value.replace('folder-', '');
      result = result.filter(note => note.folder === folderId);
    }
    
    // 按关键词搜索
    if (searchKeyword.value) {
      const keyword = searchKeyword.value.toLowerCase();
      result = result.filter(note => 
        note.title.toLowerCase().includes(keyword) || 
        note.content.toLowerCase().includes(keyword) ||
        (note.tags && note.tags.some(tag => tag.toLowerCase().includes(keyword)))
      );
    }
    
    // 排序
    if (sortOption.value === 'title_asc') {
      result = [...result].sort((a, b) => a.title.localeCompare(b.title));
    } else if (sortOption.value === 'title_desc') {
      result = [...result].sort((a, b) => b.title.localeCompare(a.title));
    } else if (sortOption.value === 'created') {
      result = [...result].sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
    } else {
      // 默认按最近更新排序
      result = [...result].sort((a, b) => new Date(b.lastModified) - new Date(a.lastModified));
    }
    
    return result;
  });
  
  // 方法：处理文件夹选择
  const handleFolderSelect = (key) => {
    currentFolder.value = key;
    currentPage.value = 1;
  };
  
  // 方法：处理搜索
  const handleSearch = () => {
    currentPage.value = 1;
  };
  
  // 方法：处理页码变化
  const handlePageChange = (page) => {
    currentPage.value = page;
  };
  
  // 方法：显示创建文件夹对话框
  const showCreateFolderDialog = () => {
    folderForm.value.name = '';
    folderDialogVisible.value = true;
  };
  
  // 方法：创建文件夹
  const createFolder = () => {
    folderFormRef.value.validate((valid) => {
      if (valid) {
        // 生成新文件夹ID
        const newId = (parseInt(folders.value[folders.value.length - 1].id) + 1).toString();
        
        // 添加新文件夹
        folders.value.push({
          id: newId,
          name: folderForm.value.name
        });
        
        ElMessage.success('文件夹创建成功');
        folderDialogVisible.value = false;
      }
    });
  };
  
  // 方法：创建新笔记
  const createNewNote = () => {
    isEditingNote.value = false;
    editingNoteId.value = null;
    noteForm.value = {
      title: '',
      type: 'text',
      content: '',
      folder: '',
      tags: []
    };
    noteDialogVisible.value = true;
  };
  
  // 方法：编辑笔记
  const editNote = (note) => {
    isEditingNote.value = true;
    editingNoteId.value = note.id;
    noteForm.value = {
      title: note.title,
      type: note.type,
      content: note.content,
      folder: note.folder,
      tags: [...note.tags]
    };
    noteDialogVisible.value = true;
  };
  
  // 方法：保存笔记
  const saveNote = () => {
    noteFormRef.value.validate((valid) => {
      if (valid) {
        if (isEditingNote.value) {
          // 更新现有笔记
          const index = notes.value.findIndex(note => note.id === editingNoteId.value);
          if (index !== -1) {
            // 生成预览文本
            let preview = '';
            if (noteForm.value.type === 'markdown') {
              // 移除Markdown标记并截取前100个字符
              preview = noteForm.value.content.replace(/[#*`_\[\]]/g, '').substring(0, 100) + '...';
            } else if (noteForm.value.type === 'mind_map') {
              preview = '思维导图内容...';
            } else {
              preview = noteForm.value.content.substring(0, 100) + '...';
            }
            
            notes.value[index] = {
              ...notes.value[index],
              title: noteForm.value.title,
              type: noteForm.value.type,
              content: noteForm.value.content,
              preview: preview,
              folder: noteForm.value.folder,
              tags: [...noteForm.value.tags],
              lastModified: new Date().toISOString().split('T')[0]
            };
            
            ElMessage.success('笔记更新成功');
          }
        } else {
          // 创建新笔记
          // 生成预览文本
          let preview = '';
          if (noteForm.value.type === 'markdown') {
            // 移除Markdown标记并截取前100个字符
            preview = noteForm.value.content.replace(/[#*`_\[\]]/g, '').substring(0, 100) + '...';
          } else if (noteForm.value.type === 'mind_map') {
            preview = '思维导图内容...';
          } else {
            preview = noteForm.value.content.substring(0, 100) + '...';
          }
          
          // 生成新笔记ID
          const newId = (parseInt(notes.value[notes.value.length - 1].id) + 1).toString();
          
          // 添加新笔记
          notes.value.push({
            id: newId,
            title: noteForm.value.title,
            type: noteForm.value.type,
            content: noteForm.value.content,
            preview: preview,
            folder: noteForm.value.folder,
            tags: [...noteForm.value.tags],
            createTime: new Date().toISOString().split('T')[0],
            lastModified: new Date().toISOString().split('T')[0],
            favorite: false,
            shared: false
          });
          
          ElMessage.success('笔记创建成功');
        }
        
        noteDialogVisible.value = false;
      }
    });
  };
  
  // 查看笔记相关变量
  const viewDialogVisible = ref(false);
  const viewingNote = ref(null);
  
  // 方法：打开笔记查看对话框
  const openNote = (note) => {
    viewingNote.value = note;
    viewDialogVisible.value = true;
  };
  
  // 方法：切换收藏状态
  const toggleFavorite = (note) => {
    const index = notes.value.findIndex(n => n.id === note.id);
    if (index !== -1) {
      notes.value[index].favorite = !notes.value[index].favorite;
      ElMessage.success(notes.value[index].favorite ? '已收藏笔记' : '已取消收藏');
    }
  };
  
  // 方法：移动笔记
  const moveNote = (note) => {
    moveNoteId.value = note.id;
    moveTargetFolder.value = note.folder;
    moveDialogVisible.value = true;
  };
  
  // 方法：确认移动笔记
  const confirmMoveNote = () => {
    const index = notes.value.findIndex(note => note.id === moveNoteId.value);
    if (index !== -1) {
      notes.value[index].folder = moveTargetFolder.value;
      ElMessage.success('笔记已移动');
      moveDialogVisible.value = false;
    }
  };
  
  // 方法：分享笔记
  const shareNote = (note) => {
    shareOption.value = 'link';
    shareEmail.value = '';
    shareEmailContent.value = `我想与你分享一个笔记：${note.title}`;
    sharePermissions.value = {
      allowEdit: false,
      allowDownload: true
    };
    shareDialogVisible.value = true;
  };
  
  // 方法：确认分享笔记
  const confirmShareNote = () => {
    if (shareOption.value === 'email' && !shareEmail.value) {
      ElMessage.warning('请输入邮箱地址');
      return;
    }
    
    ElMessage.success('笔记已分享');
    shareDialogVisible.value = false;
  };
  
  // 方法：导出笔记
  const exportNote = (note) => {
    ElMessage.success(`笔记 "${note.title}" 已导出`);
  };
  
  // 方法：确认删除笔记
  const confirmDeleteNote = (note) => {
    deleteIndex.value = notes.value.findIndex(n => n.id === note.id);
    deleteConfirmVisible.value = true;
  };
  
  // 方法：删除笔记
  const deleteNote = () => {
    if (deleteIndex.value !== -1) {
      notes.value.splice(deleteIndex.value, 1);
      ElMessage.success('笔记已删除');
      deleteConfirmVisible.value = false;
    }
  };
  
  // 方法：获取文件夹名称
  const getFolderName = (folderId) => {
    const folder = folders.value.find(f => f.id === folderId);
    return folder ? folder.name : '';
  };
  
  // 生命周期钩子
  onMounted(() => {
    // 在实际应用中，这里会从API获取数据
  });
</script>

<style lang="scss" scoped>
.notes-container {
  padding: 20px;
  max-width: 90%;
  margin: 0 auto;
  
  .page-header {
    margin-bottom: 20px;
    
    h1 {
      margin: 0 0 10px;
      font-size: 24px;
      color: #303133;
    }
    
    p {
      margin: 0;
      color: #606266;
    }
  }
  
  .notes-content {
    display: flex;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    
    .notes-sidebar {
      width: 250px;
      border-right: 1px solid #ebeef5;
      
      .sidebar-header {
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ebeef5;
        
        h3 {
          margin: 0;
          font-size: 16px;
          color: #303133;
        }
      }
      
      .folder-menu {
        border-right: none;
      }
      
      .create-note {
        padding: 15px;
        border-top: 1px solid #ebeef5;
        
        .el-button {
          width: 100%;
        }
      }
    }
    
    .notes-main {
      flex: 1;
      padding: 20px;
      
      .notes-filters {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        
        .search-box {
          width: 250px;
        }
        
        .view-options {
          display: flex;
          align-items: center;
          gap: 15px;
          
          .view-buttons {
            display: flex;
          }
          
          .el-radio-group {
            display: flex;
          }
          
          .el-select {
            width: 120px;
          }
        }
      }
      
      .notes-list {
        margin-bottom: 20px;
        
        &.grid-view {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: 15px;
          
          .note-item {
            height: 200px;
            flex-direction: column;
            
            .note-icon {
              margin-right: 0;
              margin-bottom: 10px;
            }
            
            .note-info {
              width: 100%;
            }
            
            .note-actions-container {
              margin-top: auto;
              
              .note-actions {
                justify-content: center;
              }
            }
          }
        }
        
        &.list-view {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        
        .note-item {
          position: relative;
          display: flex;
          padding: 15px;
          border: 1px solid #ebeef5;
          border-radius: 4px;
          transition: all 0.3s;
          
          &:hover {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          }
          
          .note-content {
            display: flex;
            flex: 1;
            cursor: pointer;
          }
          
          /* 移除单独的图标列，图标已移至标题左侧 */
          
          .note-info {
            flex: 1;
            overflow: hidden;
            
            .note-title {
              font-size: 16px;
              font-weight: 500;
              color: #303133;
              margin-bottom: 5px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              display: flex;
              align-items: center;
              
              .title-icon {
                font-size: 18px;
                color: #409EFF;
                margin-right: 8px;
                display: flex;
                align-items: center;
                background-color: rgba(64, 158, 255, 0.1);
                padding: 4px;
                border-radius: 4px;
              }
            }
            
            .note-preview {
              color: #606266;
              font-size: 14px;
              margin-bottom: 10px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
            
            .note-meta {
              display: flex;
              font-size: 12px;
              color: #909399;
              
              .note-date, .note-folder {
                margin-right: 15px;
              }
            }
          }
          
          .note-actions-container {
            width: 100%;
            border-top: 1px solid #ebeef5;
            margin-top: 10px;
            padding-top: 10px;
            
            .note-actions {
              display: flex;
              align-items: center;
              gap: 5px;
              justify-content: flex-end;
              
              .el-button {
                padding: 6px;
                margin-left: 0;
                
                .favorite-active {
                  color: #E6A23C;
                }
              }
            }
          }
        }
        
        .empty-notes {
          padding: 40px 0;
        }
      }
    }
  }
}

.tag-input {
  .el-tag {
    margin-right: 5px;
  }
  
  .input-new-tag {
    width: 90px;
  }
}

.note-editor {
  margin-top: 15px;
  
  .editor-toolbar {
    margin-bottom: 10px;
  }
}

// 查看笔记对话框样式
.note-view-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;
    margin-bottom: 0;
  }
  
  .view-note-content {
    padding: 15px;
    
    .view-note-header {
      margin-bottom: 25px;
      padding-bottom: 20px;
      border-bottom: 1px solid #ebeef5;
      background-color: #f9fafc;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      
      .title-row {
        display: flex;
        align-items: center;
        margin-bottom: 18px;
        
        .note-type-icon {
          font-size: 26px;
          color: #409EFF;
          margin-right: 12px;
          display: flex;
          align-items: center;
          background-color: rgba(64, 158, 255, 0.1);
          padding: 8px;
          border-radius: 8px;
        }
        
        h2 {
          margin: 0;
          font-size: 24px;
          color: #303133;
          font-weight: 600;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      
      .view-note-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
        font-size: 14px;
        color: #606266;
        padding: 0 5px;
        
        .el-tag {
          border-radius: 4px;
          padding: 0 8px;
          height: 24px;
          line-height: 22px;
        }
      }
      
      .view-note-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 5px;
        
        .tag-item {
          margin-right: 0;
          border-radius: 4px;
          background-color: #f0f2f5;
          color: #606266;
          transition: all 0.3s;
          
          &:hover {
            background-color: #e6f1fc;
            color: #409EFF;
          }
        }
      }
    }
    
    .view-note-body {
      background-color: #ffffff;
      border-radius: 8px;
      padding: 25px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      border: 1px solid #ebeef5;
      
      .text-content, .markdown-content {
        pre {
          white-space: pre-wrap;
          word-wrap: break-word;
          margin: 0;
          font-family: inherit;
          line-height: 1.8;
          color: #303133;
          font-size: 15px;
          padding: 10px;
          background-color: #f9f9f9;
          border-radius: 6px;
        }
      }
      
      .mind-map-placeholder {
        height: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #909399;
        border: 1px dashed #dcdfe6;
        border-radius: 8px;
        background-color: #f9fafc;
        font-size: 16px;
      }
    }
  }
  
  .el-dialog__footer {
    border-top: 1px solid #ebeef5;
    padding-top: 15px;
    margin-top: 10px;
  }
}

@media (max-width: 768px) {
  .notes-content {
    flex-direction: column;
    
    .notes-sidebar {
      width: 100% !important;
      border-right: none;
      border-bottom: 1px solid #ebeef5;
    }
    
    .notes-main {
      .notes-filters {
        flex-direction: column;
        gap: 10px;
        
        .search-box {
          width: 100%;
        }
        
        .view-options {
          justify-content: space-between;
        }
      }
      
      .notes-list {
        &.grid-view {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}
</style>